// import React from 'react';

// require('./Slider.scss');

// import SliderItem from './SliderItem/SliderItem';
// import SliderDots from './SliderDots/SliderDots';
// import SliderArrows from './SliderArrows/SliderArrows';


// export default class Slider extends React.Component{
//   constructor(props) {
//     super(props);
//     this.state = {
//       nowLocal: 0,
//     };
//   }

//   // 向前向后多少
//   turn(n) {
//     console.log();
//     var _n = this.state.nowLocal + n;
//     if(_n < 0) {
//       _n = _n + this.props.items.length;
//     }
//     if(_n >= this.props.items.length) {
//       _n = _n - this.props.items.length;
//     }
//     this.setState({nowLocal: _n});
//   }

//   // 开始自动轮播
//   goPlay() {
//     if(this.props.autoplay) {
//       this.autoPlayFlag = setInterval(() => {
//         this.turn(1);
//       }, this.props.delay * 1000);
//     }
//   }

//   // 暂停自动轮播
//   pausePlay() {
//     clearInterval(this.autoPlayFlag);
//   }

//   componentDidMount() {
//     this.goPlay();
//   }

//   render() {
//     let count = this.props.items.length;

//     let itemNodes = this.props.items.map((item, idx) => {
//       return <SliderItem item={item} count={count} key={'item' + idx} />;
//     });

//     let arrowsNode = <SliderArrows turn={this.turn.bind(this)}/>;

//     let dotsNode = <SliderDots turn={this.turn.bind(this)} count={count} nowLocal={this.state.nowLocal} />;

//     return (
//       <div
//         className="slider"
//         onMouseOver={this.props.pause?this.pausePlay.bind(this):null} onMouseOut={this.props.pause?this.goPlay.bind(this):null}>
//           <ul style={{
//               left: -100 * this.state.nowLocal + "%",
//               transitionDuration: this.props.speed + "s",
//               width: this.props.items.length * 100 + "%"
//             }}>
//               {itemNodes}
//           </ul>
//           {this.props.arrows?arrowsNode:null}
//           {this.props.dots?dotsNode:null}
//         </div>
//       );
//   }
// }

// Slider.defaultProps = {
//   speed: 1,
//   delay: 2,
//   pause: true,
//   autoplay: true,
//   dots: true,
//   arrows: true,
//   items: [],
// };
// Slider.autoPlayFlag = null;

import React from 'react';
import SliderItem from './SliderItem/SliderItem';
import SliderDots from './SliderDots/SliderDots';
// import SliderArrows from './SliderArrows/SliderArrows';
require('./slider.css');
let Slider = React.createClass({
  getDefaultProps() {
    return {
      speed: 2,
      delay: 3,
      pause: true,
      autoplay: true,
      dots: true,
      arrows: true,
      items: [],
    }

  },
  getInitialState(){
    return {
      nowLocal: 0,
    }
  },

  componentDidMount() {
    this.goPlay();
  },

    // 向前向后多少
  turn(n) {
    console.log();
    var _n = this.state.nowLocal + n;
    if(_n < 0) {
      _n = _n + this.props.items.length;
    }
    if(_n >= this.props.items.length) {
      _n = _n - this.props.items.length;
    }
    this.setState({nowLocal: _n});
  },
  // 开始自动轮播
  goPlay() {
    if(this.props.autoplay) {
      this.autoPlayFlag = setInterval(() => {
        this.turn(1);
      }, this.props.delay * 1000);
    }
  },

  componentWillUnmount() {
    window.clearInterval(this.autoPlayFlag);
  },

  render() {
    let count = this.props.items.length;

    let itemNodes = this.props.items.map((item, idx) => {
      return <SliderItem item={item} count={count} key={'item' + idx} />;
    });

    let dotsNode = <SliderDots turn={this.turn} count={count} nowLocal={this.state.nowLocal} />;

    return (
      <div className="slider">
        <ul style={{
              left: -100 * this.state.nowLocal + "%",
              transitionDuration: this.props.speed + "s",
              width: this.props.items.length * 100 + "%"
            }}>
              {itemNodes}
          </ul>
          {
            this.props.dots?dotsNode:null
          }
      </div>
    )
    
  }
})

export default Slider;